<template>
    <!-- 简单的Office文档预览组件 -->
    <div class="simple-office-viewer">
        <h3>简单Office预览示例</h3>
    
        <!-- 基本用法：直接预览URL -->
        <div class="basic-usage">
            <h4>1. 基本用法 - 直接预览URL</h4>
            <p>直接使用Microsoft Office Online Viewer预览文档：</p>
      
            <div class="preview-container">
                <iframe 
                    src="https://view.officeapps.live.com/op/embed.aspx?src=https://estate-micro-test.tangees.com/localfiles/1754388143-测试.docx"
                    width="100%" 
                    height="400px"
                    frameborder="0"
                ></iframe>
            </div>
        </div>

        <!-- 使用插件：动态生成预览URL -->
        <div class="plugin-usage">
            <h4>2. 使用插件 - 动态生成预览URL</h4>
            <p>使用OfficeViewer插件生成预览URL：</p>
      
            <div class="url-input">
                <el-input 
                    v-model="documentUrl" 
                    placeholder="请输入文档URL"
                    style="width: 400px; margin-right: 10px;"
                />
                <el-button @click="generatePreview" type="primary">
                    生成预览
                </el-button>
            </div>
      
            <div v-if="previewUrl" class="preview-container">
                <p>预览URL: {{ previewUrl }}</p>
                <iframe 
                    :src="previewUrl" 
                    width="100%" 
                    height="400px"
                    frameborder="0"
                ></iframe>
            </div>
        </div>

        <!-- 文件上传预览 -->
        <div class="upload-usage">
            <h4>3. 文件上传预览</h4>
            <p>上传本地文件进行预览：</p>
      
            <el-upload
                :auto-upload="false"
                :on-change="handleFileUpload"
                :show-file-list="false"
                accept=".doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf"
            >
                <el-button type="success">选择文件</el-button>
            </el-upload>
      
            <div v-if="uploadedFile" class="file-info">
                <p>已选择文件: {{ uploadedFile.name }}</p>
                <p>文件大小: {{ formatFileSize(uploadedFile.size) }}</p>
            </div>
      
            <div v-if="uploadPreviewUrl" class="preview-container">
                <iframe 
                    :src="uploadPreviewUrl" 
                    width="100%" 
                    height="400px"
                    frameborder="0"
                ></iframe>
            </div>
        </div>

        <!-- 代码示例 -->
        <div class="code-examples">
            <h4>4. 代码示例</h4>
      
            <el-tabs>
                <el-tab-pane label="基本用法">
                    <pre><code>// 1. 导入插件
import OfficeViewer from '@/utils/officeViewer'

// 2. 创建预览器实例
const viewer = new OfficeViewer()

// 3. 生成预览URL
const previewUrl = viewer.generateViewerUrl('https://example.com/document.pdf')

// 4. 在模板中使用
&lt;iframe :src="previewUrl" width="100%" height="600px"&gt;&lt;/iframe&gt;</code></pre>
                </el-tab-pane>
        
                <el-tab-pane label="文件验证">
                    <pre><code>// 导入文件验证工具
import { FileUploader } from '@/utils/officeViewer'

// 验证文件
const validation = FileUploader.validateFile(file)
if (validation.valid) {
  console.log('文件验证通过')
} else {
  console.error('文件验证失败:', validation.message)
}</code></pre>
                </el-tab-pane>
        
                <el-tab-pane label="本地文件预览">
                    <pre><code>// 为本地文件创建预览URL
const objectUrl = FileUploader.createObjectURL(file)
const previewUrl = viewer.generateViewerUrl(objectUrl)

// 使用完毕后释放资源
FileUploader.revokeObjectURL(objectUrl)</code></pre>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import OfficeViewer, { FileUploader } from '@/utils/officeViewer';

// 响应式数据
const documentUrl = ref('https://estate-micro-test.tangees.com/localfiles/1754388143-测试.docx');
const previewUrl = ref('');
const uploadedFile = ref<File | null>(null);
const uploadPreviewUrl = ref('');

// 创建预览器实例
const viewer = new OfficeViewer();

/**
 * 生成预览URL
 * 演示如何使用插件生成预览URL
 */
const generatePreview = () => {
    if (!documentUrl.value) {
        ElMessage.warning('请输入文档URL');
        return;
    }
  
    try {
    // 使用插件生成预览URL
        previewUrl.value = viewer.generateViewerUrl(documentUrl.value);
        ElMessage.success('预览URL生成成功');
    } catch (error) {
        ElMessage.error('生成预览URL失败');
        console.error('生成预览URL失败:', error);
    }
};

/**
 * 处理文件上传
 * 演示如何上传本地文件并预览
 */
const handleFileUpload = (file: any) => {
    // 验证文件
    console.log(file.raw);
    const validation = FileUploader.validateFile(file.raw);
    if (!validation.valid) {
        ElMessage.error(validation.message || '文件验证失败');
        return;
    }
  
    // 保存文件信息
    uploadedFile.value = file.raw;
  
    // 创建本地文件URL
    const objectUrl = FileUploader.createObjectURL(file.raw);
  
    // 生成预览URL
    uploadPreviewUrl.value = viewer.generateViewerUrl(objectUrl);
  
    ElMessage.success('文件上传成功，开始预览');
};

/**
 * 格式化文件大小
 * 将字节数转换为可读的文件大小
 */
const formatFileSize = (bytes: number): string => {
    if (bytes === 0) return '0 B';
    const k = 1024;
    const sizes = ['B', 'KB', 'MB', 'GB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
};
</script>

<style scoped>
.simple-office-viewer {
  max-width: 1000px;
  padding: 20px;
  margin: 0 auto;
}

.basic-usage,
.plugin-usage,
.upload-usage,
.code-examples {
  padding: 20px;
  margin-bottom: 40px;
  background-color: #fafafa;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
}

.preview-container {
  margin-top: 15px;
  overflow: hidden;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.url-input {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.file-info {
  padding: 10px;
  margin: 15px 0;
  background-color: #f0f9ff;
  border-radius: 4px;
}

.file-info p {
  margin: 5px 0;
  color: #666;
}

pre {
  line-height: 1.5;
  padding: 15px;
  overflow-x: auto;
  font-size: 14px;
  background-color: #f5f5f5;
  border-radius: 4px;
}

code {
  font-family: 'Courier New', monospace;
}

h3 {
  margin-bottom: 30px;
  color: #333;
}

h4 {
  margin-bottom: 15px;
  color: #666;
}

p {
  margin-bottom: 10px;
  color: #666;
}
</style> 